<template>
  <div class="filter_pop" v-if="isShowFilterPop">
    <div class="pop_cont">
      <div class="sort_box">
        <div class="pop_tit">培训讲座类型：</div>
        <div class="list_box">
          <div
            class="item_box"
            v-for="item in lecturerTypeList"
            :key="item.id"
            :class="{ active: item.id == form.lecturerTypeId }"
            @click="checkType(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="sort_box">
        <div class="pop_tit">培训讲师：</div>
        <div class="list_box">
          <div
            class="item_box"
            v-for="item in lecturerList"
            :key="item.id"
            :class="{ active: item.id == form.lecturerId }"
            @click="checkLecturer(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="dis_flex">
        <div class="btn btn_01" @click="toClear">清空</div>
        <div class="btn btn_02" @click="toConfirm">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  lecturerTypeSelector,
  lecturerSelector,
} from "@/api/funcation/training";
export default {
  props: {
    isShowFilterPop: Boolean,
  },
  data() {
    return {
      lecturerTypeList: [],
      lecturerList: [],
      form: {
        lecturerTypeId: "",
        lecturerId: "",
      },
    };
  },
  created() {
    this.getLecturerType();
    this.getLecturer();
  },
  methods: {
    async getLecturerType() {
      let res = await lecturerTypeSelector();
      if (res.code == 200) {
        this.lecturerTypeList = res.data;
      }
    },
    async getLecturer() {
      let res = await lecturerSelector();
      if (res.code == 200) {
        this.lecturerList = res.data;
      }
    },
    checkType(item) {
      this.form.lecturerTypeId = item.id;
    },
    checkLecturer(item) {
      this.form.lecturerId = item.id;
    },
    toConfirm() {
      this.$emit("getFilterInfo", this.form);
    },
    toClear() {
      this.form = {
        lecturerTypeId: "",
        lecturerId: "",
      };
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter_pop {
  position: fixed;
  top: 200px;
  left: 0;
  width: 100%;
  height: calc(100% - 100px);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.pop_cont {
  position: fixed;
  top: 160px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  background-color: white;
  padding: 20px;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1001;
}

.sort_box {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.pop_tit {
  color: #000000;
  font-size: 14px;
  font-weight: bold;
}

.list_box {
  margin-top: 16.33px;
}

.item_box {
  width: 102px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: #f4f6fa;
  border-radius: 6.67px;
  color: #555555;
  font-size: 14px;
}

.active {
  color: #00aeff;
  border: 1px solid #00aeff;
}

.btn {
  width: 155px;
  height: 33.33px;
  line-height: 33.33px;
}

.btn_01 {
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    #ffffff;
  border: 1px solid #dddddd;
  color: #333333;
}
</style>
